<template>
	<view>
		<!-- #ifdef APP-PLUS -->
			<view class="perch"></view>
		<!-- #endif -->
		<view class="top" v-for="(item,index) in pageData.list" :key="index">
			<view class="top-serach" v-if="item.type == 'search'">
				<!-- 搜索 -->
				<search style="width: 660rpx;margin-top: 66rpx;" :res="item.options" />
			</view>
			<!-- 轮播 -->
			<carousel v-if="item.type == 'carousel'" :res="item.options" />
			<!-- <view class="menu-layout" v-if="item.type == 'menu'">
					<menuLayout :res="item.options"></menuLayout>
				</view> -->
			<view class="menu" v-if="item.type == 'menu'">
				<!-- v-for="(item,index) in menuList" -->
				<view class="menu-item" @click="toMenuNavigator('课程库')">
					<u-image src="@/static/img/home/m-course.png" mode="widthFix" width="58rpx" height="52rpx">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
					<view class="grid-text">课程库</view>
				</view>
				<view class="menu-item" @click="toMenuNavigator('在线咨询')">
					<u-image src="@/static/img/home/m-consult.png" mode="widthFix" width="58rpx" height="52rpx">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
					<view class="grid-text">在线咨询</view>
				</view>
				<view class="menu-item" @click="toMenuNavigator('预约挂号')">
					<u-image src="@/static/img/home/m-register.png" mode="widthFix" width="58rpx" height="52rpx">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
					<view class="grid-text">预约挂号</view>
				</view>
				<view class="menu-item" @click="toMenuNavigator('找专家')">
					<u-image src="@/static/img/home/m-doctor.png" mode="widthFix" width="58rpx" height="52rpx">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
					<view class="grid-text">找专家</view>
				</view>
				<view class="menu-item" @click="toMenuNavigator('找场地')">
					<u-image src="@/static/img/home/m-base.png" mode="widthFix" width="58rpx" height="52rpx">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
					<view class="grid-text">找场地</view>
				</view>
				<view class="menu-item" @click="toMenuNavigator('实践实训')">
					<u-image src="@/static/img/home/m-train.png" mode="widthFix" width="58rpx" height="52rpx">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
					<view class="grid-text">实践实训</view>
				</view>
				<view class="menu-item" @click="toMenuNavigator('资讯')">
					<u-image src="@/static/img/home/m-news.png" mode="widthFix" width="58rpx" height="52rpx">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
					<view class="grid-text">资讯</view>
				</view>
				<view class="menu-item" @click="toMenuNavigator('更多')">
					<u-image src="@/static/img/home/m-more.png" mode="widthFix" width="58rpx" height="52rpx">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
					<view class="grid-text">更多</view>
				</view>
			</view>


			<!-- 商品/课程列表 -->
			<goods v-if="item.type == 'goods'" :res="item.options" />
			
			<goods v-if="item.type == 'courses'" :res="item.options" />
		</view>
		<!-- 模态框  -->
		<authenModal v-show="isShow" @close="closeBtn" @confirm="confirmHandle" :content="content"></authenModal>


	</view>
</template>

<script>
	import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
	import tpl_banner from "@/pages/tabbar/home/template/tpl_banner.vue" //导航栏模块
	import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
	import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
	// import authen_modal from "@/pages/tabbar/home/authen-modal.vue"
	import authenModal from "@/components/modal/authen-modal.vue";
	// 结束引用组件
	import {
		getFloorData
	} from "@/api/home"; //获取楼层装修接口
	import { API } from '@/config/myApi.js';
	import permision from "@/js_sdk/wa-permission/permission.js"; //权限工具类
	import config from "@/config/config";
	// import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
	// import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块

	export default {
		data() {
			return {
				config,
				isIos: "",
				pageData: "", //楼层页面数据
				value1: 1,
				value2: 2,
				menuList: [{
						title: "",
						img: "@/static/img/home/m-more.png",
					},

				],
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				// menu宫格样式
				customStyle: {
					"width": "100%",
					"height": "250rpx",
					"padding": "0"
				},
				info: {},
				// 模态框
				isShow: false,
				content: "请先完成实名认证才可使用",
			};
		},
		components: {
			search: tpl_search,
			carousel: tpl_banner,
			menuLayout: tpl_menu,
			goods: tpl_goods,
			// authenModal:authen_modal,
			authenModal
		},
		created() {
			this.init();
			this.getUserInfo();
		},
		mounted() {
			// #ifdef MP-WEIXIN
			// 小程序默认分享
			uni.showShareMenu({
				withShareTicket: true
			});
			// #endif
			uni.$on("toBack",(val)=>{
				console.log("回到",val);
				if (val) this.getUserInfo();
			})
		},
		methods: {
			/**
			 * 实例化首页数据楼层
			 */
			init() {
				this.pageData = "";
				getFloorData().then((res) => {
					console.log("res",res);
					if (res.data.success) {
						this.pageData = JSON.parse(res.data.result.pageData);
						
						console.log("pageData",this.pageData);
					}
				});
			},
			getUserInfo() {
				API.getMember().then(res=> {
					console.log('进入HOME',res)
					this.info = res.result;
				})
			},
			// 是否有网络链接
			isConnected(val) {
				val ? this.init() : ''
			},
			// 是否认证
			isAuthen(callback) {
				console.log(this.info)
				console.log('认证函数：',this.info.realAuthentication)
				if (this.info.realAuthentication) { // 是否认证
					this.isShow = false;
					callback()
					return
				} else {
					this.isShow = true;
				}
			},
			// 关闭模态框
			closeBtn() {
				this.isShow = false
			},
			// 去认证
			confirmHandle() {
				this.isShow = false;
				uni.navigateTo({
					url: "/pages/passport/authen",
				})
			},
			// 去menu菜单页面
			toMenuNavigator(e) {
				switch (e) {
					case "课程库":
						this.isAuthen(()=>{
							uni.navigateTo({
								url: "/pages/course/courseCenter",
							})
						})
						break;
					case "在线咨询":
						this.isAuthen(()=>{
							uni.navigateTo({
								url: "/pages/mine/myConsultation/onlineConsulting?consultOpen=1",
							})
						})
						break;
					case "预约挂号":
						this.isAuthen(()=>{
							uni.navigateTo({
								url: "/pages/registered/chooseSite",  
							})
						})
						break;
					case "找专家":
					this.isAuthen(()=>{
							uni.navigateTo({
								url: "/pages/experts/index",
							})
						})
						break;
					case "找场地":
						this.isAuthen(()=>{
							uni.navigateTo({
								url: "/pages/site/index",
							})
						})
						break;
					case "实践实训":
						this.isAuthen(()=>{
							uni.navigateTo({
								url: "/pages/base/index",
							})
						})
						break;
					case "资讯":
						this.isAuthen(()=>{
							uni.navigateTo({
								url: "/pages/information/index",
							})
						})
						break;
					case "更多":
						// this.isAuthen(()=>{
						// 	uni.navigateTo({
						// 		url: "/pages/course/courseCenter",
						// 	})
						// })
						break;
					default:
						break;
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.perch{
		width: 100%;
		height: 56rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.top {
		position: relative;
		height: auto;
		/* #ifdef APP-PLUS */
		top:56rpx;
		/* #endif */
		.top-serach {
			display: flex;
			justify-content: center;
			position: absolute;
			top: 26rpx;
			width: 100%;
			// padding-left: calc(45/750*640rpx);
			// padding-right: calc(45/750*640rpx);
			// #ifdef H5
			padding: 0 45rpx;
			// #endif
			// #ifdef MP-WEIXIN
			padding: 0 90rpx; //待定
			// #endif		
			z-index: 30;
		}

		// 菜单
		.menu {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 690rpx;
			height: 342rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 21px 0rpx #EAEAEA;
			border-radius: 16rpx;
			margin: 0 auto;
			transform: translateY(-50rpx);

			.menu-item {
				width: 25%;
				height: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
		}

		// 菜单
		.menu-layout {
			width: 690rpx;
			height: 342rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 21rpx 0rpx #EAEAEA;
			border-radius: 16rpx;
			margin: 0 auto;
			transform: translateY(-50rpx);
		}

		.layout {
			padding: 0;
		}

	}
</style>
